<!DOCTYPE html>
<title>Overflow menu hides when clicking on the page even when propagation is stopped (with iframe).</title>
<script src="../resources/testharness.js"></script>
<script src="../resources/testharnessreport.js"></script>
<script src="media-controls.js"></script>
<script src="overflow-menu.js"></script>
<body>
</body>
<script>
function whenDataLoaded(video, callback) {
  if (video.readyState >= HTMLMediaElement.HAVE_CURRENT_DATA)
    return callback();
  video.onloadeddata = callback;
}

async_test(function(t) {
  var iframe = document.createElement('iframe');
  iframe.width = iframe.height = 500;
  iframe.src = 'resources/video-stop-propagation.html';
  iframe.onload = t.step_func(function() {
    var video = iframe.contentDocument.querySelector('video');
    whenDataLoaded(video, t.step_func_done(function() {
      var overflowList = getOverflowList(video);
      var overflowMenu = getOverflowMenuButton(video);

      // Clicking on the overflow menu button should make the overflow list visible
      var coords = elementCoordinates(overflowMenu);
      clickAtCoordinates(coords[0], coords[1]);
      setTimeout(function() {
        assert_not_equals(getComputedStyle(overflowList).display, "none");

        // Click anywhere outside the overflow menu should close overflow list.
        var coords = coordinatesOutsideElement(overflowList);
        clickAtCoordinates(coords[0], coords[1]);
        assert_equals(getComputedStyle(overflowList).display, "none");
      });
    }));
  });
  document.body.appendChild(iframe);
});
</script>
